<template>
	<view class="list">
		<list-view v-show="lishiData.length>0">
			<list-item v-for="(item,index) in lishiData" :key="index">
				<view class="card">
					<view><span>PM2.5：</span>{{item.pmTwoFive}}</view>
					<view><span>PM10：</span>{{item.pmTen}}</view>
					<view><span>噪声：</span>{{item.zaosheng}}</view>
					<view><span>温度：</span>{{item.wendu}}</view>
					<view><span>湿度：</span>{{item.shidu}}</view>
					<view><span>风力：</span>{{item.fengli}}</view>
					<view><span>风速：</span>{{item.fengsu}}</view>
					<view><span>风向(8方位)：</span>{{item.fengxiangDangWei}}</view>
					<view><span>风向：</span>{{item.fengxiang}}</view>
					<view><span>大气压：</span>{{item.daqiya}}</view>
					<view><span>报警类型：</span>{{item.remark}}</view>
					<view><span>记录时间：</span>{{formatDate(item.createTime)}}</view>
				</view>
			</list-item>
		</list-view>
		<view class="card" v-show="lishiData.length<=0">
			<p style="text-align: center;color: #909399;">没有更多数据</p>
		</view>
	</view>
</template>

<script>
	import indexApi from '@/api/index.js'
	export default {
		data() {
			return {
				lishiData:[]
			}
		},
		onLoad(option) {
			indexApi.getDevice(option).then(res=>{
				this.lishiData = res.data.rows;
			})
		},
		methods: {
			formatDate(dateString){
			    const dateObj = new Date(dateString);
			    const year = dateObj.getFullYear();
			    const month = String(dateObj.getMonth() + 1).padStart(2, '0');
			    const day = String(dateObj.getDate()).padStart(2, '0');
			    return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style>
	page{
		background-color: #EFEFF4;
	}
.list{
	padding: 30rpx;
}
.card{
	height: 700rpx;
	border-radius: 10px;
	margin-bottom: 30rpx;
	padding: 10px;
	font-size: 38rpx;
	background-color: #fff;
}
.card .text{
	width: 100%;
}
</style>
